{% extends 'blog/base.html' %}
{% block cssBlock %}
    <link rel="stylesheet" type="text/css" href="../../static/blog/css/detail.css"/>
{% endblock %}
{% block contentBlock %}
    <div class="container">
        <article id="post-1202"
                 class="js-gallery post-1202 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized tag-11 tag-22 tag-29">
            <style>
                .container {
                    padding: 10px 0px;
                }

                .post {
                    margin: 0 auto
                }
            </style>
            <section class="post_content">
                <header class="post_header">
                    <h1 class="post_title">{{ article.title }}</h1>
                </header>
                <div class="post-body js-gallery">
                    {{ article.content | safe }}
                </div>
                <div class="meta split split--responsive cf">
                    <div class="split__title">
                        <time datetime="2017-10-02 01:44">{{ article.pub_date }}</time>
                        <span><a
                                href="{% url "category:cat_index" cat=article.category %}">{{ article.category }}</a></span>
                    </div>
                    <div id="social-share"><span class="entypo-share"><i class="iconfont">&#xe614;</i>分享</span></div>
                    <div class="slide">
                        <a class="btn-slide" title="switch down"><i class="iconfont">&#xe615;</i>折叠评论区</a>
                    </div>
                </div>
            </section>
        </article>
    </div>
    <svg id="upTriangleColor" width="100%" height="40" viewBox="0 0 100 102" preserveAspectRatio="none">
        <path d="M0 0 L50 100 L100 0 Z"></path>
    </svg>
    <div id="social">
        <center>
            <div class="bshare-custom icon-medium-plus"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博"
                                                                                                       class="bshare-sinaminiblog"></a><a
                    title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a
                    title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台"
                                                                    class="bshare-more bshare-more-icon more-style-addthis"></a><span
                    class="BSHARE_COUNT bshare-share-count">0</span></div>
            <script type="text/javascript" charset="utf-8"
                    src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script>
            <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
        </center>
    </div>
    <div id="panel">
        <div class="comment-area">
            <section class="comments">
                <div class="comments-main">
                    <div id="comments-list-title"><span>{{ comment_list|length }}</span> 条评论</div>
                    <div id="loading-comments">
                        <div class="host">
                            <div class="loading loading-0"></div>
                            <div class="loading loading-1"></div>
                            <div class="loading loading-2"></div>
                        </div>
                    </div>
                    {% load pagination_tags %}
                    {% autopaginate comment_list 5 %}
                    {% for comment in comment_list %}
                        <ul class="commentwrap">
                            <li class="comment even thread-even depth-1" id="li-comment-">
                                <div id="comment-969" class="comment_body contents">
                                    <div class="profile">
                                        <img src="../../static/blog/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg"
                                             class="gravatar" alt="默认头像">
                                    </div>
                                    <div class="main shadow">
                                        <div class="commentinfo">
                                            <section class="commeta">
                                                <div class="shang">
                                                    <h4 class="author"><img
                                                            src="../../static/blog/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg"
                                                            class="gravatarsmall"
                                                            alt="{{ comment.name }}">{{ comment.name }}</h4>
                                                </div>
                                            </section>
                                        </div>
                                        <div class="body">
                                            <p>{{ comment.text }}</p>
                                        </div>
                                        <div class="xia info">
                                            <span><time datetime="{{ comment.pub_date }}">{{ comment.pub_date }}</time></span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <!-- #comment-## -->
                        </ul>
                    {% endfor %}
                    {% paginate %}
                    {#                <nav id="comments-navi">#}
                    {#                    <a class="prev page-numbers" href="">#}
                    {#                        <</a>#}
                    {#                            <a class='page-numbers' href="">1</a>#}
                    {#                            <a class='page-numbers' href="">2</a>#}
                    {#                            <a class='page-numbers' href="">3</a>#}
                    {#                            <span aria-current='page' class='page-numbers current'>4</span></nav>#}
                    <div id="respond" class="comment-respond">
                        <form action="{% url 'comments:article_comment' cid=article.id %}" method="post"
                              id="commentform" class="clearfix">
                            {% csrf_token %}
                            <div class="clearfix"></div>
                            <div class="author-info">
                                {{ form.name }}
                                {{ form.name.errors }}
                                {{ form.email }}
                                {{ form.email.errors }}
                                {{ form.url }}
                                {{ form.url.errors }}
                            </div>
                            <div class="clearfix"></div>
                            <div class="comment-form-info">
                                <div class="real-time-gravatar"><img id="real-time-gravatar"
                                                                     src="../../static/blog/images/d41d8cd98f00b204e9800998ecf8427e.png"
                                                                     alt="gravatar头像"/>
                                </div>
                                <p class="input-row">
                                    <i class="row-icon"></i>
                                    {{ form.text }}
                                    {{ form.text.errors }}
                                    <input type="submit" name="submit" class="button" id="submit" tabindex="5"
                                           value="发送">
                                </p>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <svg id="dwTriangleColor" width="100%" height="40" viewBox="0 0 100 102" preserveAspectRatio="none">
        <path d="M0 0 L50 100 L100 0 Z"></path>
    </svg>
    <div class="wrapper">
    </div>
{% endblock %}
{% block PheaderBlock %}
    <div class="p-header">
        <figure class="p-image"
                style="background-image: url(../../static/blog/images/47fb3c_9afed6c259f94589881bd55376206366mv2_d_3840_5784_s_4_2.jpg);"></figure>
    </div>
{% endblock %}
{% block script1Block %}
    <script type="text/javascript">
        window.onscroll = function () {
            var scrollTop = document.body.scrollTop;
            if (scrollTop >= 200) {
                document.getElementById("NextPrevPosts").style.display = "none"
            } else {
                document.getElementById("NextPrevPosts").style.display = "block"
            }
        }
    </script>
{% endblock %}

{% block script2Block %}
    <script type='text/javascript' src='../../static/blog/js/prism.js'></script>
    <script type='text/javascript' src='../../static/blog/js/gravatar.js'></script>
{% endblock %}